<template>
  <div class="settingBox">
    <el-radio-group class="bin_radio_card tabs" v-model="settingType">
      <el-radio-button :label="1">后端保存位置</el-radio-button>
      <el-radio-button :label="2">数据备份</el-radio-button>
    </el-radio-group>
    <div class="tabs1Box" v-if="settingType == 1">
      <div class="edit_item">
        <div class="name">后端数据保存位置：</div>
        <div class="ipt">
          <el-input
            class="bin_input"
            v-model="defaultPath"
            placeholder="请输入"
          ></el-input>
        </div>
      </div>
      <div class="edit_btns">
        <el-button class="bin_button" size="small" @click="cancelBtn">
          取消
        </el-button>
        <el-button class="bin_button" size="small" @click="save">
          确认
        </el-button>
      </div>
    </div>
    <div class="tabs2Box" v-if="settingType == 2">
      <div class="box1Lable">数据库备份</div>
      <div class="edit_item" style="margin-top: 20px">
        <div class="name">备份时间：</div>
        <div class="ipt">
          <el-date-picker
            style="border: none"
            class="bin_datetime"
            popper-class="bin_datetime_popper"
            v-model="time"
            type="datetime"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- <el-input
            
            v-model="currEdit.time"
            placeholder="请输入"
          ></el-input> -->
        </div>
      </div>
      <div class="edit_item">
        <div class="name">备份人：</div>
        <div class="ipt">
          <el-input
            class="bin_input"
            v-model="currEdit.user"
            placeholder="请输入"
          ></el-input>
        </div>
      </div>
      <div class="edit_btn22">
        <el-button class="bin_button" size="small" @click="beifen">
          开始备份
        </el-button>
      </div>
      <div class="box1Lable">备份记录</div>
      <div class="table_box">
        <el-table
          :border="true"
          ref="multipleTable"
          :data="tableData"
          :fit="true"
          tooltip-effect="dark"
          style="width: 100%"
          class="bin_table"
        >
          <el-table-column
            min-width="80"
            resizable
            prop="backupUser"
            label="上传人"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            min-width="150"
            resizable
            prop="backupDate"
            label="修改时间"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            min-width="170"
            resizable
            prop="backupPath"
            label="备份路径"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column resizable label="操作" min-width="50">
            <template slot-scope="scope">
              <!-- <img
                class="actBtn"
                :src="require('../assets/record.png')"
                @click="record"
                alt=""
              /> -->
              <img
                class="actBtn"
                :src="require('../assets/del.png')"
                @click="delete1(scope.row)"
                alt=""
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <div class="pageInfo">
            <span class="size">{{ pageSize }}</span>
            条每页，共{{ total }}条
          </div>
          <el-pagination
            class="bin_fenyeqi"
            :current-page="currPage"
            :page-size="10"
            :pager-count="5"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changeYuanPage"
            popper-class="bin_fenyeqi_popper"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {
    // currEdit: {
    //   type: Object,
    //   default: () => {
    //     return {
    //       checkedl: [],
    //     };
    //   },
    // },
  },
  data() {
    return {
      defaultPath: "",
      settingType: 1,
      currPage: 1,
      pageSize: 10,
      total: 0,
      time: new Date(),
      currEdit: {
        user: "",
        time: "",
      },
      tableData: [],
    };
  },
  created() {
    this.getSavePath();
    this.getHistoryList();
  },
  mounted() {},
  methods: {
    changeYuanPage(val) {
      console.log(val);
      this.currPage = val;
      this.getHistoryList();
      // if (this.tableStatus == NORMAL) {
      //   this.leftTreeGetTable();
      // } else if (this.tableStatus == ALLRESULT) {
      //   this.search();
      // } else if (this.tableStatus == FILTER) {
      //   this.filter1();
      // }
    },
    cancelBtn() {
      this.$emit("cancel");
    },
    save() {
      let obj = { dbBackupPath: this.defaultPath };
      this.$api.saveDBBackupPath(obj).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      });
    },
    formatDateWithoutSeparators(date) {
      const formattedDate =
        date.toISOString().slice(0, 10).replace(/-/g, "") +
        " " +
        date.toTimeString().slice(0, 8).replace(/:/g, "");
      // 注意：上面的代码可能不是最精确的，因为它使用了 toISOString 和 toTimeString，
      // 这两个方法返回的字符串格式可能因浏览器而异，并且可能包含不需要的字符。
      // 更好的做法是使用自定义的格式化逻辑，如下：
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}${month}${day}${hours}${minutes}${seconds}`;
    },
    beifen() {
      this.currEdit.time = this.formatDateWithoutSeparators(
        new Date(this.time)
      );
      console.log(this.currEdit.time, "time");
      if (!this.currEdit.user) {
        this.$message({
          message: "请输入备份人",
          type: "warning",
        });
        return false;
      }

      this.$api.backupDefault(this.currEdit).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "备份成功",
            type: "success",
          });
          this.getHistoryList();
          this.currPage = 1;
          this.pageSize = 10;
        }
      });
    },
    getHistoryList() {
      this.$api
        .getBackupRecordList({
          pageNum: this.currPage,
          pageSize: this.pageSize,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.tableData = res.result.content;
          }
          this.total = res.result.totalSize;
        });
    },
    getSavePath() {
      this.$api.getDBBackupPath().then((res) => {
        this.defaultPath = res.result;
      });
    },
    delete1(row) {
      this.$confirm("确定删除?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$api
            .removeBackupRecord({ backupId: row.backupId })
            .then((res) => {
              this.$message({
                message: "清空成功",
                type: "success",
              });
            });
        })
        .catch(() => {});
    },
    record() {},
    goLinkFn() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-picker-panel {
  background: #072f46;
}

.settingBox {
  .tabs {
    margin: 30px;
  }

  .edit_item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;

    .name {
      width: 180px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      line-height: 40px;
      color: #fff;
      text-align: right;
    }

    .ipt {
      width: 300px;
    }

    .item_box {
      display: flex;
      flex-wrap: wrap;
      width: calc(100% - 100px);

      .edit_item {
        width: 50%;

        .name {
          width: 120px;
        }
      }

      .ipt {
        width: calc(100% - 100px);
      }
    }
  }

  .tabs1Box {
    padding: 0 30px 30px 30px;

    .form_box {
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      min-height: 200px;
      background: #072f46;
      margin-bottom: 20px;
      border: 1px solid #02fff4;
    }
  }

  .tabs2Box {
    .edit_item {
      padding-left: 30px;

      .name {
        width: 100px;
        text-align: left;
      }
    }

    .edit_btn22 {
      padding-left: 130px;
      margin-bottom: 20px;
    }

    .box1Lable {
      width: 100%;
      height: 50px;
      background: rgba(2, 255, 244, 0.15);
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #ffffff;
      line-height: 50px;
      box-sizing: border-box;
      padding-left: 30px;
    }

    .table_box {
      box-sizing: border-box;
      padding: 30px;

      .actBtn {
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-right: 10px;

        &:last-child {
          margin: 0;
        }
      }
    }

    .pageBox {
      height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .pageInfo {
        height: 18px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;

        .size {
          color: #02fff4;
        }
      }
    }
  }

  .edit_btns {
    margin-top: 50px;
    display: flex;
    align-self: center;
    justify-content: center;
  }
}
</style>
